<script setup lang="ts">
import { reactive, ref, computed } from "vue";

var top_text = "<h3>张三</h3>";

const data = reactive([
  {
    id: 3,
    name: "懒人小沙发",
    describe: "舒适休闲，完善支撑",
    price: 126.4,
    isHot: 1,
  },
  { id: 4, name: "减压弹力球", describe: "释放压力，放松身心", price: 95.2 },
  { id: 5, name: "简约一字发夹", describe: "简约设计，百搭款式", price: 15.9 },
  {
    id: 6,
    name: "毛线小兔子耳朵发夹",
    describe: "可爱萌趣，精致做工",
    price: 12.7,
  },
  {
    id: 6,
    name: "华为畅享 60X",
    describe: "7000mA 大电池鸿蒙系统",
    price: 688,
    isHot: 1,
  },
]);
var find_text = ref("");
// 使用 computed 来实现搜索过滤
var filteredData = computed(() => {
  if (!find_text.value.trim()) {
    return data; // 如果搜索框为空，返回所有数据
  }
  const query = find_text.value.toLowerCase();
  console.log("搜索关键字：" + find_text.value);
  return data.filter(
    (item) =>
      item.name.toLowerCase().includes(query) ||
      item.describe.toLowerCase().includes(query)
  );
});
</script>

<template>
  <div class="top">
    <input type="text" v-model="find_text" placeholder="搜一搜" />
    <button>确认</button>
    <div class="top_h3" v-html="top_text"></div>
  </div>

  <h1 class="list_tit">商品列表</h1>
  <div class="list">
    <div class="list_ul">
      <div
        class="list_li"
        v-for="item in filteredData"
        :id="item.id"
        :key="item.id"
      >
        <div class="li_img">商品图片</div>
        <p>{{ item.name }}</p>
        <span>{{ item.describe }}</span>
        <h3>
          {{ item.price }} <span class="isHot" v-if="item.isHot">热销</span>
        </h3>
      </div>
    </div>
  </div>
</template>

<style scoped>
.top {
  height: 53px;
  width: 100%;
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top input {
  display: block;
  padding-left: 5px;
  color: #666;
  width: 150px;
  height: 32px;
  border-radius: 10px;
}
.top button {
  display: block;
  padding: 0 5px;
  color: #666;
  width: 50px;
  height: 35px;
  border-radius: 10px;
  border: none;
}
.top_h3 {
  width: 1080px;
  font-weight: 100;
  line-height: 53px;
  color: #f2f2f2;
  text-align: end;
}
.list_tit {
  width: 1280px;
  margin: 30px auto 50px;
}
.list {
  width: 100%;
  display: flex;
  justify-content: center;
}
.list_ul {
  width: 1280px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.list_li {
  position: relative;
  width: 300px;
  border-radius: 5px;
  height: 100%;
  text-align: left;
  overflow: hidden;
  margin: 0 18px 20px 0;
}
.li_img {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #abe1cc;
}
.list_li p {
  font-size: 18px;
  line-height: 1px;
}

.list_li span {
  display: block;
  font-size: 14px;
  color: #888;
}
.list_li h3 {
  font-size: 28px;
  color: #cf4444;
  line-height: 1px;
}
.list_li .isHot {
  position: absolute;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #cf4444;
  border-radius: 10px;
  bottom: 30px;
  right: 10px;
  color: yellow;
  font-family: "宋体";
}
</style>
